<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
<h:head/>      
<h:body>
    <ui:composition template="template/main.xhtml">
                
    <ui:define name="body">
        <div class="col-sm-12">
			<div class="panel panel-default">
			    <div class="panel-body row">
			        <aside class="col-sm-5">
                        <h:graphicImage library="images" name="Products/MacBookAir.jpg" style="width: 100%"/>
			        </aside>
			        <section class="col-sm-7">
			            <h1 style="margin-bottom:5px">Título del producto</h1>
			            <small>Categoría: Tecnología </small><br /> <br /> 
			            <p><span class="text-success">Marca: Sony</span></p>
			            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			            <hr />
			            <h2 class="text-warning">S/. 2500.00</h2>   
			            <!-- if la cantidad de stok mayor a 0 --> 
		                   <small class="text-muted">Producto Disponible</small>
		                <!-- else: stok agotado  -->
			            <br />
			            <br />
			            <form>
				            <p>
	                            <input type="hidden" name="cartCant" value="1" class="form-control" />
	                            <input type="submit" class="btn btn-danger" value="Añadir al carrito" />                      
	                        </p>
			            </form>
			            <br />
			            <div class="panel panel-default">
			              <!-- Default panel contents -->
			              <div class="panel-heading">Acerca de la compra</div>
			                <ul class="list-group">
			                  <li class="list-group-item">
			                    <span class="badge"><i class="fa fa-truck"></i></span>
			                    Envíos a todo el Perú. 3 días para Lima. 5 días para provincias
			                  </li>
			                  <li class="list-group-item">
			                    <span class="badge"><i class="fa fa-usd"></i></span>
			                    El Mejor Precio del mercado
			                  </li>
			                  <li class="list-group-item">
			                    <span class="badge"><i class="fa fa-star"></i></span>
			                    La Mejor Tienda online del Perú. Somos parte del Grupo Cibertec
			                  </li>
			                </ul>
			            </div>
			        </section>
                </div>
            </div> 
        </div>                     
    
        <br/><br/><br/>
        
        <div class="col-sm-12">
        
            <div class="panel panel-primary">
	        
	            <div class="panel-heading">
	               <h3 class="panel-title text-center">También te puede interesar</h3>
	            </div>
	            
	        </div>
        
        </div>
        <c:forEach begin="1" end="8">
        <!-- Iterar Productos -->
        <div class="col-sm-6 col-md-4 col-lg-3">
            <ui:include src="template/includes/listProducts.xhtml" /> 
        </div> 
        </c:forEach>
    </ui:define>
        
    
    </ui:composition>
</h:body>
</html>